<!-- 框选数据列表 -->
<template>
  <div class="selection" ref="selection">
    <BoxHeader name="地图筛选数据列表" @amplifyHandler="amplifyHandler" />
    <div class="selection_operate">
      <el-radio-group v-if="WarehouseStore.boxSelectionData" v-model="WarehouseStore.tabType" @change="redChange"
        size="default" fill="#FF0F40">
        <el-radio-button v-for="(item, index) in WarehouseStore.boxSelectionData" :key="index" :label="item.name">{{
          `${item.name}(${item.num})`
        }}</el-radio-button>
      </el-radio-group>
      <div class="selection_operate_right">
        <el-checkbox v-model="state.allTabs">导出全部页签数据</el-checkbox>
        <el-button type="danger" size="default" @click="handleExport">导出Excel</el-button>
      </div>
    </div>

    <div class="selection_table">
      <el-table :data="WarehouseStore.boxSelectionDataList" border :height="state.height"
        :header-cell-style="{ color: '#303133', fontSize: '14px', backgroundColor: '#F8F9FC' }">
        <template v-for="item in SettingStore.column">
          <el-table-column :prop="item.prop" :label="item.label" show-overflow-tooltip v-if="item.hidden" align="center">
            <template #default="{ row }">
              <span v-if="item.prop === 'modifyAt'">{{ time(row[item.prop]) }}</span>
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column align="center">
          <template #header>
            <div class="header_tabel" @click="setTableHandler">
              <SvgIcon name="setting" width="14px" height="14px" />
              <span>设置表头</span>
            </div>
          </template>
          <template #default="{ row }">
            <div class="btn" @click="openHandler(row)">详情</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination :current-page="WarehouseStore.selectPage" :page-size="WarehouseStore.selectLimit"
        :page-sizes="[10, 20, 50, 100]" :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="WarehouseStore.selectTotal" @size-change="WarehouseStore.handleSelectSizeChange"
        @current-change="WarehouseStore.handleSelectCurrentChange" />
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { dayjs } from 'element-plus'
import { exportPost } from '@/api/usemap'
import { ElMessage } from "element-plus"
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
const state = reactive({
  height: 200,
  allTabs: false
})
//  时间转换
const time = (value: number) => {
  if (!value) return ''
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}
//  设置表头
const setTableHandler = () => {
  SettingStore.setColumnName(WarehouseStore.tabType)
  SettingStore.setTableHeaderShow = !SettingStore.setTableHeaderShow
}
//  放大
let selection = ref()
const amplifyHandler = (value: boolean) => {
  if (value) {
    selection.value.style.height = 'calc(100vh - 16px)'
    state.height = 600
  } else {
    selection.value.style.height = '360px'
    state.height = 200
  }
}
//  根据类型获取表头
const redChange = () => {
  SettingStore.setColumnName(WarehouseStore.tabType)
  SettingStore.setColumn()
  WarehouseStore.boxSelectionData.forEach((item: any) => {
    if (item.name === WarehouseStore.tabType) {
      WarehouseStore.type = item.type
      WarehouseStore.pageListPostAjax()
    }
  })
}
//  详情
const openHandler = (row: any) => {
  WarehouseStore.infoList = row
  SettingStore.detailsShow = !SettingStore.detailsShow
}
//  导出
const handleExport = async () => {
  if (WarehouseStore.boxSelectionDataList.length === 0) {
    ElMessage.error('无数据导出')
    return
  }
  try {
    let params: any[] = []
    const filters = [{
      fieldName: 'geo',
      value: WarehouseStore.searchCondition.WKTStr
    }]
    if (state.allTabs) {  //  导出全部
      WarehouseStore.boxSelectionData.forEach((item: any) => {
        params.push({
          tableName: tableName(item.name),
          returnFieldNames: [],
          filters
        })
      })
    } else {  //  导出当前页
      params = [{
        tableName: tableName(WarehouseStore.tabType),
        returnFieldNames: [],
        filters
      }]
    }
    params.forEach((item: any) => {
      if (item.tableName === 'loop') {
        item.filters[0].element = 'line'
      } else {
        item.filters[0].element = 'point'
      }
    })
    await exportPost(params)
    ElMessage.success('导出成功，请去下载中心下载')
  } catch (error) {

  }
}
//  获取表名
const tableName = (value: string) => {
  return WarehouseStore.treeList.map((item: any) => { if (item.nameValue === value) return item.name }).join('')
}

</script>

<style scoped lang="scss">
.header_tabel {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  span {
    margin-left: 2px;
  }
}

.selection {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 11;
  width: calc(100% - 20px);
  height: 360px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transition: all .3s;

  .selection_operate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;

    .selection_operate_right {
      display: flex;
      align-items: center;

      button {
        margin-left: 16px;
      }
    }
  }

  .selection_table {
    padding: 0 16px 12px;
  }

  .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
  }
}
</style>./column